<template>
  <div id="detail">
    <div class="top_area">
        <table>
          <tr>
            <td class="td_img" rowspan="3">

            <span v-html="imgurl"></span>
            <vue-core-image-upload
             :class="['change_upload']"
             :crop="false"
             @imageuploaded="imageuploaded"
             :data="imgdata"
             :max-file-size="5242880"
              url="./upload" 
              text="更改头像">
              </vue-core-image-upload>
            </td>
            <td class="jianju"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;&nbsp;admin3</td>
            <td class="jianju"><i class="fa fa-birthday-cake" aria-hidden="true"></i>&nbsp;&nbsp;<input type="text" v-model="age_num" class="age"></td>
          </tr>
          <tr>
            <td class="jianju" colspan="2"><i class="fa fa-map-marker" aria-hidden="true" style="float: left;margin-left: 10%;margin-right: 3%"></i>&nbsp;&nbsp;<span v-if="!is_address">{{ address }}&nbsp;&nbsp;<i class="fa fa-pencil" aria-hidden="true" style="font-size:16px" @click="is_address = !is_address"></i></span><span v-if="is_address"><myarea @select="change_area" ></myarea><i class="fa fa-pencil" aria-hidden="true" style="font-size:16px" @click="is_address = !is_address"></i></span></td>
          </tr>
          <tr>
            <td class="jianju" colspan="2"><i class="fa fa-envelope-o" aria-hidden="true"></i><input type="email" v-model="email_num" class="email"></td>
          </tr>
          <tr>
            <td class="jianju size" colspan="3"><textarea class="summary" v-model="summary_num" @keyup="count_summary"></textarea></td>
          </tr>
          <tr>
            <td class="btn" colspan="3"><button @click="change_info">修改资料</button></td>
          </tr>
        </table>
    </div>
  </div>
</template>

<script>
import area from "../Public/area.vue";
import VueCoreImageUpload  from 'vue-core-image-upload';
export default {
  props: {

  },
  watch:{

  },
  created(){
    this.$http({
        method:'GET',
        url:'http://123.56.86.203/queryuser?id='+this.$cookie.get('uid'),
    }).then(function(res){
        var result = res.data;
          if(result.status == 1){
             this.address=result.info.address == ''?'北京北京东城区':result.info.address;
             this.age_num= result.info.age =='' || result.info.age == null ?'暂无':result.info.age;
             this.email_num= result.info.email =='' || result.info.email ==null?'暂无':result.info.email;
             this.summary_num= result.info.summary =='' || result.info.summary ==null ?'这家伙很懒，暂无简介':result.info.summary;
             this.imgurl= result.info.photo =='' || result.info.photo == null ?"<img src='./static/img/default.png'>":result.info.photo;
          }else{
            alert(result.info);
          }
      },function(error){
         console.log(error);
      })
  }, 
  components:{
    'myarea':area,
    VueCoreImageUpload
  },
  data () {
    return {
      is_address:false,
      address:'北京北京东城区',
      email_num:'暂无',
      age_num:'暂无',
      summary_num:'这家伙很懒，暂无简介',
      imgdata: {
        src: '',
      },
      imgurl:"<img src='./static/img/default.png'>"
    }
  },
  methods: {
    change_info(){
        var userinfo = new Object();
        userinfo = {'id':this.$cookie.get('uid'),'photo':this.imgurl,'age':this.age_num,'email':this.email_num,'address':this.address,'summary':this.summary_num};
         this.$http.post("http://123.56.86.203/changeuser",
         {
            userinfo
         },
         {emulateJSON:true}
         ).then(response=>{
            var data=response.data;
            if(data.status == 1){
              alert(data.info);
              history.go(0);
            }else{  
              alert(data.info);
            }
         })  
    },
    change_area(res){
      this.address=res.pro.name+res.city.name+res.county.name;
    },
    count_summary(){
       if(this.summary_num.length>50){
          alert('超出字数限制！');
          this.summary_num=this.summary_num.substring(0,50);
       }
    },
    imageuploaded(res) {
      this.imgurl='';
      this.imgurl += '<img src=./uploads/'+res.filename+'>';
    }
  }
}
</script>

<style>
.td_img img{
  border-radius: 50%;
  width: 72%;
  height: 72%;
  margin-top: 7%;
  margin-left: 13%;
}
</style>
<style scoped>
#detail{

}
.top_area{
  width: 100%;
}
.top_area table tr{
  width: 100%
}
.top_area table tr td{
  font:16px/60px '微软雅黑';
  color:#666;
  border: 3px solid #eee;
}
.td_img{
  width:190px;
  height: 190px;
}

.jianju{
  height: 60px;
  width: 196px;
  text-align: center;
}
.jianju .age{
  width: 45px;
  text-align: center;
  border: 1px solid #fff;
}
.jianju .email{
  text-align: center;
  border: 1px solid #fff; 
  
  width: 200px;
  margin-left: 2%;
}
.jianju .summary{
  width: 100%;
  border: 1px solid #fff; 
  resize: none;
  animation: changefont 3s ease-in-out 1;
  text-align: center;
  margin-top: 5%;
  line-height: 22px;
  height: auto;
  
}
.jianju i{
  font-size: 25px;
  line-height: 60px;
  color:#666;
  
}
.btn button{
  width: 90%;
  height: 50px;
  margin-left: 5%;
  border: 1px solid #DE5246;
  background-color: #DE5246;
  color:#fff;
}
.size{
  padding: 15px;
}
.change_upload{
  width: 66%;
  height: 35px;
  border: 1px solid #CECECE;
  text-align:center;
  color:#666666;
  font:18px/35px '微软雅黑';
  background-color: #fff;
  position: relative;
  top:-5%;
  left: 15%;
}
@keyframes changefont{
  0%   {font-size: 16px;color:#666;}
  50%  {font-size: 19px;color:#1A8DCC;}
  100% {font-size: 16px;color:#666;}
}
</style>
